<template>
	<view class="index1_content">
		<!-- 公司名称 -->
		<view class="index1_headers">
			<image class="avatar" :src="setImage(userInfoFull.avatar)" mode=""></image>
			<view class="index1_headers1">
				<view class="index1-username" @longpress="onLongPressUsername()" @touchend="onTouchEnd">
					Hello，{{lang=='zh'?userInfoFull.username:userInfoFull.username_ru}}</view>
				<view class="subtitle">{{$t('欢迎使用GLUZ平台')}}</view>
			</view>
			<image class="business" src="@/static/index2/business.png" mode="widthFix" @click="handeleCard"></image>
		</view>
		<!-- 消息 -->
		<view class="index2_information">
			<image class="small_bell" src="@/static/index2/small_bell.png" mode="widthFix"></image>
			<view class="bell_text">
				<u-notice-bar mode="horizontal" padding="0 0" :list="list" bg-color="transparent;" type="none"
					:volume-icon="false"></u-notice-bar>
			</view>
		</view>
		<!-- 消息列表文字 -->
		<view class="w100p flex-box flex-stretch content_wrap" :class="{'ru_style': lang === 'ru'}">
			<view class="index1_message">
				<image class="message_icon" src="@/static/index2/22261x.png" mode="">
				</image>
				<span>{{$t('推荐资源')}}</span>
			</view>
			<view class="right_order" @click="handeleMyOrder">
				<text class="name">{{$t('我的订单')}}</text>
				<u-icon class="icon" name="arrow-right"></u-icon>
			</view>
		</view>

		<!-- 模块 -->
		<view class="list_block">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" refresher-enabled="true"
				:refresher-triggered="freshIsShow" @scrolltolower="lower" @refresherrefresh="fresh"
				@refresherrestore="store"
				refresher-background="background: linear-gradient(90deg, #82B0FC -2%, #90DAE6 105%);">
				<view v-if="arr.length>0" class="index1_block" :class="{'ru_style': lang === 'ru'}"
					v-for="(item,index) in arr" :key="index">
					<!-- 公司名称 -->
					<view class="index1_images">
						<image class="img" :src="setImage(item.release_user.avatar)" mode=""></image>
						<view class="index1_images1">
							<view class="index1_title1" @longpress="onLongPress(item.user)" @touchend="onTouchEnd">
								{{lang=='zh'?item.release_user.username:item.release_user.username_ru}}
							</view>
							<view class="index1_imagescx2" v-if="(item.data && item.data.category)">{{$t('发货地')}}：
								{{lang=='zh'?item.data.category.name:item.data.category.name_ru}}
							</view>
						</view>
						<view class="unit_price oh">
							<text>{{$t('期望单价')}}：</text>
							<text class="num ellipsis">18000001800000</text>
							<text>/{{$t('元')}}</text>
						</view>
					</view>
					<!-- 货物信息 -->
					<view class="index1_goods">
						<view class="w100p top_goods">{{$t('货物信息')}}</view>
						<view class="index1_goods2">
							<view class="index1_goods2_block">
								<view class="index1_goods2zh">{{$t('任务要求')}}</view>
								<view class="con_text">
									办理加拿大签证
								</view>
							</view>
							<view class="index1_goods2_block">
								<view class="index1_goods2zh">{{$t('任务时长')}}</view>
								<view class="con_text">
									10{{$t('天')}}
								</view>
							</view>
							<view class="index1_goods2_block">
								<view class="index1_goods2zh">{{$t('发布时间')}}</view>
								<view class="con_text">
									2024-11-08 10:10:10
								</view>
							</view>
						</view>
					</view>
					<view class="index1_xq4">
						<view v-if="!item.order" style="width: 196rpx;height: 60rpx;">
							<u-button :disabled="communicateDisabled" style="font-size: 22rpx;" type="success"
								shape="circle" class="index_xq1"
								@click.stop="handeleUninterested(item,index)">{{$t('不感兴趣')}}</u-button>
						</view>

						<view style="width: 196rpx;height: 60rpx;margin-left: 21rpx;">
							<u-button :disabled="communicateDisabled" style="font-size: 22rpx;" type="success"
								shape="circle" class="index_xq2"
								@click.stop="handeleWanttobuy(item)">{{$t('参与竞标')}}</u-button>
						</view>

						<view style="width: 196rpx;height: 60rpx;margin-left: 21rpx;">
							<u-button :disabled="communicateDisabled" style="font-size: 22rpx;" type="success"
								shape="circle" class="index_xq3"
								@click.stop="handeleCommunicate(item)">{{$t('即时沟通')}}</u-button>
						</view>
					</view>
				</view>
				<view v-if="arr.length===0" class="Currently-unavailable">
					<u-empty :text="$t('数据为空')" mode="list"></u-empty>
				</view>
			</scroll-view>
		</view>
		<vipPopup v-if="vipShow" :show="vipShow" @handeleVip="clickVipPopup" />
		<u-popup v-model="show" mode="center" border-radius="32">
			<view class="longPressTextClass">{{longPressText}}</view>
		</u-popup>
		<!-- 顶部背景色 -->
		<image style="width: 750rpx;height: 792rpx;position: absolute;top: 0;z-index: 1;"
			src="@/static/index2/20241101130857.png" mode=""></image>

		<movable-area class="publish_wrap">
			<movable-view class="max" direction="vertical" x="0" y="0" :out-of-bounds="true">
				<image class="fb_img" @click="handeleFB" src="@/static/index2/index19.png" mode="widthFix">
				</image>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	//VIP弹窗
	import vipPopup from "@/components/vipPopup/index.vue";
	import {
		createC2CConversation
	} from "@/common/public";
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		components: {
			vipPopup
		},
		data() {
			return {
				communicateDisabled: false,
				longPressText: '',
				show: false,
				userInfoFull: uni.getStorageSync('userInfoFull'),
				user_id: "",
				freshIsShow: true,
				scrollTop: 0,
				arr: [],
				page: 1,
				id: '',
				total: 0,
				limit: 20,
				vip: false,
				vipShow: false,
				lang: 'ru',
				placeholder: '@/static/order.png', // 本地占位图路径
				list: []
			}
		},
		created() {
			this.user_id = this.userInfoFull.user_id;
			this.getLang();
		},
		methods: {
			onLongPressorder_no(item) {
				this.show = true
				this.longPressText = item.order_no
			},
			// 松开
			onTouchEnd() {
				this.show = false
			},
			onLongPressUsername() {
				this.show = true
				if (this.lang == 'zh') {
					this.longPressText = this.userInfoFull.username
				} else {
					this.longPressText = this.userInfoFull.username_ru
				}
			},
			// 长按
			onLongPress(item) {
				this.show = true
				if (this.lang == 'zh') {
					this.longPressText = item.username
				} else {
					this.longPressText = item.username_ru
				}
			},
			// 跳转至个人名片
			handeleCard() {
				uni.navigateTo({
					url: '/pages/tabbar/order/businessCard?id=' + this.user_id
				})
			},
			// 跳转至我的订单
			handeleMyOrder() {
				uni.navigateTo({
					url: '/pages/tabbar/order/index'
				})
			},
			// 发布
			handeleFB() {
				uni.switchTab({
					url: '/pages/tabbar/release/index'
				})
			},
			// 不感兴趣
			handeleUninterested(item, index) {

				uni.showModal({
					title: this.$t('提示'),
					content: this.$t('感谢您反馈的信息，我们会努力优化推送内容。'),
					confirmText: this.$t('确认'),
					cancelText: this.$t('取消'),
					success: res => {
						if (res.confirm) {
							this.communicateDisabled = true;
							let data = {
								id: item.id,
								content: '',

							}
							this.$u.api.basic.setRefuse(
								data
							).then(() => {
								this.arr.splice(index, 1)
								uni.showToast({
									icon: 'none',
									title: this.$t('操作成功')
								})
								this.communicateDisabled = false
							})
						} else if (res.cancel) {}
					}
				});

			},
			// 隐藏vip弹窗
			clickVipPopup() {
				console.log('隐藏');
				this.vipShow = false //点击vip弹窗隐藏
			},
			//参与竞标
			handeleWanttobuy(item) {
				this.communicateDisabled = true
				setTimeout(() => {
					this.communicateDisabled = false
				}, 2000)
				// 先判断手机号，如果使自己手机号，自己不能和参与
				var mobile = uni.getStorageSync('mobile');

				if (mobile === item.release_user.mobile) {
					this.$u.toast(this.$t('不能参与自己'));
					return
				}
				this.$u.api.user.order_join_day_auth({
					lang: this.lang
				}).then(res => {
					if (res == 1) {
						//参与竞标
						uni.navigateTo({
							url: item.path
						})
					} else {
						if (this.vip) {
							this.vipShow = true
							return
						} else {
							uni.showModal({
								content: this.$t('您的权限不足哦!请联系工作人员!'),
								showCancel: false,
								confirmText: this.$t('是'),
							})
							return false;
						}
					}
				})

			},
			// 即时沟通
			handeleCommunicate(item) {
				this.communicateDisabled = true
				setTimeout(() => {
					this.communicateDisabled = false
				}, 2000)
				createC2CConversation(item.release_user.mobile, this)
			},
			// 获取vip信息
			getVip() {
				this.$u.api.user.appCheck().then(res => {
					this.vip = res.vip;
				})
			},
			// 获取数据
			getData() {
				if (this.lang == 'zh') {
					this.list = [
						`我们为您找到了${0}条供应需求，期待您的报价！`
					];
				} else {
					this.list = [
						`Мы нашли для Вас ${0} предложений к поставкам и с нетерпением ждем Ваших запросов!`
					];
				}
				// let params = {
				// 	page: this.page,
				// 	limit: this.limit
				// }
				// this.$u.api.transport.getTransportList(params).then(res => {
				// 	console.log('res:', res);
				// 	this.total = res.count
				// 	if (this.page == 1) {
				// 		this.arr = res.list
				// 		this.page++
				// 		this.freshIsShow = false
				// 	} else {
				// 		this.arr = [...this.arr, ...res.list]
				// 		this.page++
				// 		this.freshIsShow = false
				// 	}

				// })

			},


			setImage(IMAGE) {
				if (IMAGE?.slice(-3) === 'png' || IMAGE?.slice(-3) === 'jpg') {
					return IMAGE_URL + IMAGE
				} else if (IMAGE) {
					return IMAGE
				} else {
					return HTTP_IMG_UTL + 'images-zhanweitu.png'

				}
			},
			// 下拉刷新复位
			store() {
				this.freshIsShow = false
			},
			// 下拉刷新触发
			fresh() {
				this.page = 1
				this.freshIsShow = true
				this.getData()
			},
			// 触底加载
			lower() {
				// 触底判断总条数不等于当前数据的条数则获取数据
				if (this.arr.length < this.total) {
					this.getData()
				}
			},
			// 获取缓存lang当前语言值
			getLang() {
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
						uni.showLoading({
							title: this.$t('加载中')
						})
						Promise.all([this.getData(), this.getVip()]).then(() => {
							uni.hideLoading();
						}).catch(() => {
							uni.hideLoading();
						})
					}
				});
			},
		},

	}
</script>
<style lang="less" scoped>
	@import url(@/common/common.less);

	page {
		width: 100%;
		height: 100%;
		background-color: #F1F2F4;
	}

	.content_wrap {
		width: 690rpx;
	}

	.index1_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.index1_headers {
		width: 690rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-top: 84rpx;
		margin-bottom: 30rpx;
		z-index: 2;
		position: relative;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 24rpx;
			flex: none;
		}

		.index1_headers1 {
			flex: 1;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 16rpx;

			.index1-username {
				width: 100%;
				font-size: 32rpx;
				color: #FFFFFF;
				word-break: break-all;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				padding-right: 20rpx;
			}

			.subtitle {
				font-size: 22rpx;
				color: #FFFFFF;
				margin-top: 6rpx;
			}
		}

		.business {
			width: 50rpx;
			flex: none;
		}
	}

	.index2_information {
		width: 690rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		z-index: 2;
		justify-content: center;
		background: linear-gradient(0deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.192) 100%);
		border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;
		border-radius: 10rpx;

		.small_bell {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}

		.bell_text {
			width: 580rpx;
			padding-left: 20rpx;
			color: #005299;
			font-size: 24rpx;
			line-height: 42rpx;
			border-left: 1px solid #fff;
		}
	}

	.index1_message {
		width: 690rpx;
		display: flex;
		align-items: center;
		z-index: 2;
		color: #FFFFFF;
		margin-bottom: 24rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
		letter-spacing: 3rpx;

		.message_icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
	}

	.right_order {
		flex: none;
		display: inline-flex;
		align-items: center;
		z-index: 2;

		.name {
			font-size: 26rpx;
			line-height: 1.1;
			color: #fff;
			margin-right: 14rpx;
		}

		.icon {
			font-size: 26rpx;
			color: #fff;
		}
	}

	.list_block {
		width: 690rpx;
		height: calc(100vh - 500rpx);
		z-index: 2;

		.scroll-Y {
			width: 690rpx;
			height: 100%;
		}

		.index1_block {
			width: 690rpx;
			min-height: 390rpx;
			border-radius: 32rpx;
			background-color: #FFFFFF;
			padding: 30rpx 30rpx 54rpx 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			z-index: 2;
			margin-bottom: 70rpx;
			margin-top: 10rpx;

			.index1_images {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;

				.img {
					flex: none;
					width: 100rpx;
					height: 100rpx;
					border-radius: 100rpx;
				}

				.index1_images1 {
					flex: none;
					width: 200rpx;
					height: 100rpx;
					margin-left: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: flex-start;

					.index1_title1 {
						width: 100%;
						font-size: 28rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
						white-space: nowrap;
					}

					.index1_imagescx2 {
						height: 31rpx;
						border-radius: 31rpx;
						background-color: #F32929;
						font-size: 22rpx;
						color: #FFFFFF;
						box-sizing: border-box;
						display: inline-block;
						padding: 0 10rpx;
						text-align: center;
						line-height: 31rpx;
					}
				}

				.unit_price {
					flex: 1;
					display: inline-flex;
					align-items: flex-end;
					justify-content: flex-end;
					font-size: 24rpx;
					line-height: 32rpx;
					color: #FF0000;
					margin-bottom: 54rpx;

					text {
						flex: none;
						display: inline-block;
					}

					.num {
						flex: 1;
						font-size: 40rpx;
						line-height: 40rpx;
						margin-right: 10rpx;
					}
				}
			}

			.index1_goods {
				width: 630rpx;
				min-height: 186rpx;
				background: #F6F7FB;
				border-radius: 32rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin-top: 24rpx;
				margin-bottom: 20rpx;

				.top_goods {
					font-size: 28rpx;
					line-height: 1.2;
					color: #000000;
				}

				.index1_goods2 {
					width: 100%;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					margin-top: 24rpx;


					.index1_goods2_block {
						min-height: 66rpx;
						width: auto;
						display: inline-flex;
						flex-direction: column;
						justify-content: space-between;
						padding-right: 10rpx;

						&:last-child {
							padding-right: 0;
						}

						.index1_goods2zh {
							font-size: 22rpx;
							color: #999999;
							min-height: 23rpx;
							margin-bottom: 10rpx;
							min-width: 100rpx;
						}

						.con_text {
							font-size: 26rpx;
							color: #000000;
						}
					}
				}
			}


			.index1_xq4 {
				position: absolute;
				bottom: -24rpx;
				left: 30rpx;
				width: 630rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 22rpx;
			}

			.index_xq1 {
				width: 196rpx;
				height: 60rpx;
				background: #FF5D5D;
			}

			.index_xq2 {
				width: 196rpx;
				height: 60rpx;
				background: #5282E6;
			}

			.index_xq3 {
				width: 196rpx;
				height: 60rpx;
				background: #06C36E;
			}


			&.ru_style {

				.index1_images {
					flex-wrap: wrap;
					height: auto;

					.unit_price {
						flex: none;
						width: 100%;
						justify-content: flex-start;
						flex-wrap: wrap;
						margin-top: 20rpx;
						margin-bottom: 0;

						text:first-child {
							width: 100%;
							margin-bottom: 10rpx;
						}

						.num {
							flex: none;
						}
					}
				}

				.index1_goods2 {
					flex-wrap: wrap;

					.index1_goods2_block {
						width: calc(50% - 10rpx);
						max-width: 50%;
						padding-right: 10rpx;
						margin-bottom: 20rpx;

						&:first-child {
							width: 100%;
							max-width: 100%;
							padding-right: 0;
						}
					}
				}
			}
		}
	}

	.ru_style {
		.index1_message {
			font-size: 28rpx;
		}
	}

	.longPressTextClass {
		width: 650rpx;
		min-height: 100rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.publish_wrap {
		width: 100%;
		height: calc(50% - 100rpx);
		font-size: 32rpx;
		position: fixed;
		top: 50%;
		right: 0;
		z-index: 3;
		pointer-events: none;

		.fb_img {
			width: 100rpx;
			border-radius: 100rpx;
		}

		.max {
			right: 30rpx;
			left: auto;
			width: auto;
			height: auto;
			pointer-events: fill;
		}
	}

	.Currently-unavailable {
		width: 100%;
		height: 300rpx;
		text-align: center;
		line-height: 300rpx;
	}
</style>